<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>投产上线工作流 - 一体化作战平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066cc',
                        secondary: '#0099cc',
                        success: '#009966',
                        warning: '#ff9900',
                        danger: '#cc3300',
                        neutral: {
                            100: '#f5f7fa',
                            200: '#e4e7ed',
                            300: '#c0c4cc',
                            400: '#909399',
                            500: '#606266',
                            600: '#303133',
                            700: '#1f2937',
                        }
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    boxShadow: {
                        'card': '0 2px 8px rgba(0, 0, 0, 0.08)',
                        'dropdown': '0 4px 16px rgba(0, 0, 0, 0.12)',
                    }
                },
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .text-shadow {
                text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
            }
            .transition-all-300 {
                transition: all 300ms ease-in-out;
            }
            .step-connector {
                @apply h-1 bg-neutral-200 flex-1 mx-2;
            }
            .step-connector-active {
                @apply bg-primary;
            }
            .step-connector-pending {
                @apply bg-neutral-200;
            }
            .collapsible-header {
                transition: background-color 0.2s ease;
            }
            .collapsible-header:hover {
                background-color: rgba(0, 0, 0, 0.02);
            }
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between px-4 py-3">
            <!-- Logo和标题 -->
            <div class="flex items-center space-x-3">
                <div class="w-10 h-10 bg-primary rounded-md flex items-center justify-center text-white">
                    <i class="fa fa-bank text-xl"></i>
                </div>
                <h1 class="text-xl font-bold text-neutral-700 hidden md:block">一体化作战平台</h1>
                <h1 class="text-lg font-bold text-neutral-700 md:hidden">研发交付平台</h1>
            </div>
            
            <!-- 搜索框 -->
            <div class="hidden md:flex relative flex-1 max-w-md mx-4">
                <input type="text" placeholder="搜索任务..." 
                    class="w-full pl-10 pr-4 py-2 rounded-md border border-neutral-200 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
            </div>
            
            <!-- 右侧用户区域 -->
            <div class="flex items-center space-x-1 md:space-x-4">
                <!-- 通知按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300">
                    <i class="fa fa-bell-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                </button>
                
                <!-- 消息按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300 hidden md:block">
                    <i class="fa fa-envelope-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-primary rounded-full"></span>
                </button>
                
                <!-- 用户头像 -->
                <div class="flex items-center space-x-2 ml-2">
                    <div class="w-8 h-8 bg-neutral-200 rounded-full overflow-hidden">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <span class="hidden md:block text-sm font-medium text-neutral-700">张三</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="flex pt-16 flex-1">
        <!-- 左侧导航菜单 -->
        <aside class="w-16 md:w-64 bg-white shadow-sm fixed h-full left-0 top-16 overflow-y-auto scrollbar-hide transform md:transform-none transition-transform duration-300 z-40 -translate-x-full md:translate-x-0">
            <nav class="py-4">
                <ul>
                    <!-- 主导航项 -->
                    <li class="mb-1">
                        <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-tachometer text-lg"></i>
                            <span class="hidden md:block">首页</span>
                        </a>
                    </li>
                    
                    <!-- 交付流程模块 -->
                    <li class="mb-1">
                        <a href="business_strategy.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-line-chart text-lg"></i>
                            <span class="hidden md:block">业务战略</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="architecture-management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-sitemap text-lg"></i>
                            <span class="hidden md:block">架构管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="requirementsManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-list-alt text-lg"></i>
                            <span class="hidden md:block">需求管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="design-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="design_management.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-paint-brush text-lg"></i>
                                    <span class="hidden md:block">设计管理</span>
                                </a>
                                <button id="design-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="design-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="interface_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-plug text-sm"></i>
                                        <span class="hidden md:block">接口管理</span>
                                    </a>
                                    <a href="model_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cubes text-sm"></i>
                                        <span class="hidden md:block">模型管理</span>
                                    </a>
                                    <a href="data_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-database text-sm"></i>
                                        <span class="hidden md:block">字典管理</span>
                                    </a>
                                    <a href="ui_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-desktop text-sm"></i>
                                        <span class="hidden md:block">差异分析</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="schedule_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-calendar text-lg"></i>
                            <span class="hidden md:block">排期管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="developmentMage.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-code text-lg"></i>
                            <span class="hidden md:block">开发管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="test-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="testManagement.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-bug text-lg"></i>
                                    <span class="hidden md:block">测试管理</span>
                                </a>
                                <button id="test-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="test-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="test_cases.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-file-text-o text-sm"></i>
                                        <span class="hidden md:block">测试案例</span>
                                    </a>
                                    <a href="test_plans.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-calendar-check-o text-sm"></i>
                                        <span class="hidden md:block">测试计划</span>
                                    </a>
                                    <a href="test_reports.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-bar-chart text-sm"></i>
                                        <span class="hidden md:block">测试报告</span>
                                    </a>
                                    <a href="test_global_settings.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cogs text-sm"></i>
                                        <span class="hidden md:block">全局设置</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="production_workflow.html" class="flex items-center space-x-3 px-4 py-3 text-primary bg-primary/5 border-r-4 border-primary">
                            <i class="fa fa-rocket text-lg"></i>
                            <span class="hidden md:block font-medium">投产上线</span>
                        </a>
                    </li>
                    
                    <!-- 新增的三个子菜单项 -->
                    <li class="mb-1">
                        <a href="quality_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-check-circle text-lg"></i>
                            <span class="hidden md:block">质量管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="security_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-shield text-lg"></i>
                            <span class="hidden md:block">安全管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="efficiency_metrics.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-bar-chart text-lg"></i>
                            <span class="hidden md:block">效能度量</span>
                        </a>
                    </li>
                    
                    <!-- 分隔线 -->
                    <li class="my-2">
                        <div class="border-t border-neutral-200 mx-4"></div>
                    </li>
                    
                    <!-- 公共模块 -->
                    <li class="mb-1">
                        <a href="teamManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-users text-lg"></i>
                            <span class="hidden md:block">团队管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="settings.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-cog text-lg"></i>
                            <span class="hidden md:block">设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 ml-16 md:ml-64 p-4 md:p-6 bg-neutral-100 min-h-screen">
            <!-- 面包屑导航 -->
            <div class="mb-6">
                <nav class="flex" aria-label="面包屑">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="index.html" class="inline-flex items-center text-sm font-medium text-neutral-500 hover:text-primary">
                                <i class="fa fa-home mr-2"></i>
                                首页
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <i class="fa fa-chevron-right text-neutral-400 text-xs mx-2"></i>
                                <span class="text-sm font-medium text-neutral-700">投产上线工作流</span>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- 页面标题 -->
            <div class="mb-6">
                <h1 class="text-2xl font-bold text-neutral-700">投产上线工作流</h1>
                <p class="text-sm text-neutral-500 mt-1">IPDO系统-2024年6月批次</p>
            </div>

            <!-- 流程进度状态 -->
            <div class="bg-white rounded-lg shadow-card p-4 md:p-6 mb-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-bold text-neutral-700">投产单【Auto-online-2025-10-01】流程进度概览</h2>
                    <div class="flex items-center space-x-2">
                        <span class="px-3 py-1 text-sm bg-primary/10 text-primary rounded-full">执行中</span>
                        <span class="text-sm text-neutral-500">
                            <i class="fa fa-clock-o mr-1"></i>开始于: 2024-06-10
                        </span>
                    </div>
                </div>
                
                <!-- 流程进度条 -->
                <div class="hidden md:block mb-8">
                    <div class="flex items-center justify-between relative">
                        <!-- 连接线 -->
                        <div class="absolute top-1/2 left-0 right-0 h-1 bg-neutral-200 -translate-y-1/2 z-0">
                            <div class="h-full bg-primary" style="width: 60%;"></div>
                        </div>
                        
                        <!-- 步骤点 -->
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs font-medium text-primary">发起申请（自动）</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs font-medium text-primary">核包（自动）</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs font-medium text-primary">审批（微小改动-自动）</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs font-medium text-primary">制品晋级</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs font-medium text-primary">生成计划（自动）</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-primary text-white flex items-center justify-center mb-2">
                                <i class="fa fa-check"></i>
                            </div>
                            <span class="text-xs font-medium text-primary">执行计划（自动）</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-warning text-white flex items-center justify-center mb-2">
                                <i class="fa fa-cog fa-spin"></i>
                            </div>
                            <span class="text-xs font-medium text-warning">技术验证（自动）</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-neutral-200 text-neutral-500 flex items-center justify-center mb-2">
                                8
                            </div>
                            <span class="text-xs font-medium text-neutral-500">业务验证（人工）</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-neutral-200 text-neutral-500 flex items-center justify-center mb-2">
                                9
                            </div>
                            <span class="text-xs font-medium text-neutral-500">回退</span>
                        </div>
                        
                        <div class="relative z-10 flex flex-col items-center">
                            <div class="w-10 h-10 rounded-full bg-neutral-200 text-neutral-500 flex items-center justify-center mb-2">
                                10
                            </div>
                            <span class="text-xs font-medium text-neutral-500">版本追平</span>
                        </div>
                    </div>
                </div>
                
                <!-- 移动端进度展示 -->
                <div class="block md:hidden mb-4">
                    <div class="relative">
                        <div class="h-2 bg-neutral-200 rounded-full mb-4">
                            <div class="h-full bg-primary rounded-full" style="width: 60%;"></div>
                        </div>
                        <div class="flex justify-between text-xs text-neutral-500">
                            <span>已完成: 6/10</span>
                            <span>当前: 技术验证</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 详细流程步骤 -->
            <div class="bg-white rounded-lg shadow-card p-4 md:p-6">
                <div class="flex items-center justify-between cursor-pointer collapsible-header rounded-md px-2 py-1 -mx-2 -my-1" onclick="toggleProcessDetails()">
                    <h2 class="text-lg font-bold text-neutral-700">流程详情</h2>
                    <i id="processDetailsIcon" class="fa fa-chevron-down text-neutral-500 transition-transform duration-300" style="transform: rotate(-90deg);"></i>
                </div>
                
                <!-- 流程步骤列表 -->
                <div id="processDetailsContent" class="overflow-hidden transition-all duration-500 ease-in-out" style="max-height: 0; opacity: 0; margin-top: 0;">
                <div class="space-y-4" style="padding-top: 16px;">
                    <!-- 步骤1: 发起上线申请 -->
                    <div class="border-l-4 border-success pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-success/10 text-success flex items-center justify-center">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">1. 发起上线申请</h3>
                                    <p class="text-sm text-neutral-500 mt-1">创建上线申请单，填写上线内容和影响范围</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-success">已完成</div>
                                <div class="text-xs text-neutral-500 mt-1">2024-06-10 09:30</div>
                                <div class="text-xs text-neutral-500">执行人: 李四</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤2: 关联系统核包会签 -->
                    <div class="border-l-4 border-success pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-success/10 text-success flex items-center justify-center">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">2. 关联系统核包会签</h3>
                                    <p class="text-sm text-neutral-500 mt-1">关联系统负责人对上线内容进行审核确认</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-success">已完成</div>
                                <div class="text-xs text-neutral-500 mt-1">2024-06-10 14:20</div>
                                <div class="text-xs text-neutral-500">执行人: 王五</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤3: 上线申请审批 -->
                    <div class="border-l-4 border-success pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-success/10 text-success flex items-center justify-center">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">3. 上线申请审批</h3>
                                    <p class="text-sm text-neutral-500 mt-1">项目经理和技术负责人审批上线申请</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-success">已完成</div>
                                <div class="text-xs text-neutral-500 mt-1">2024-06-11 10:15</div>
                                <div class="text-xs text-neutral-500">执行人: 赵六</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤4: 制品晋级 -->
                    <div class="border-l-4 border-success pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-success/10 text-success flex items-center justify-center">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">4. 制品晋级</h3>
                                    <p class="text-sm text-neutral-500 mt-1">将验证通过的制品从测试环境晋级到预发布环境</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-success">已完成</div>
                                <div class="text-xs text-neutral-500 mt-1">2024-06-11 15:40</div>
                                <div class="text-xs text-neutral-500">执行人: 钱七</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤5: 生成变更计划 -->
                    <div class="border-l-4 border-success pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-success/10 text-success flex items-center justify-center">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">5. 生成变更计划</h3>
                                    <p class="text-sm text-neutral-500 mt-1">根据上线内容自动生成详细的变更实施计划</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-success">已完成</div>
                                <div class="text-xs text-neutral-500 mt-1">2024-06-12 09:10</div>
                                <div class="text-xs text-neutral-500">执行人: 孙八</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤6: 执行变更计划 -->
                    <div class="border-l-4 border-success pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-success/10 text-success flex items-center justify-center">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">6. 执行变更计划</h3>
                                    <p class="text-sm text-neutral-500 mt-1">按照变更计划在生产环境执行上线部署</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-success">已完成</div>
                                <div class="text-xs text-neutral-500 mt-1">2024-06-12 22:30</div>
                                <div class="text-xs text-neutral-500">执行人: 周九</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤7: 执行投产技术验证 -->
                    <div class="border-l-4 border-warning pl-4 py-2 bg-warning/5">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-warning/10 text-warning flex items-center justify-center">
                                    <i class="fa fa-cog fa-spin"></i>
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">7. 执行投产技术验证</h3>
                                    <p class="text-sm text-neutral-500 mt-1">技术团队对上线后的系统进行技术层面验证</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-warning">进行中</div>
                                <div class="text-xs text-neutral-500 mt-1">2024-06-13 00:15</div>
                                <div class="text-xs text-neutral-500">执行人: 吴十</div>
                            </div>
                        </div>
                        <!-- 进行中的详细信息 -->
                        <div class="mt-3 pl-10">
                            <div class="text-sm text-neutral-600">
                                <i class="fa fa-comment-o mr-1"></i>
                                正在进行核心功能和接口性能测试，预计1小时后完成
                            </div>
                            <div class="mt-2">
                                <div class="w-full bg-neutral-200 rounded-full h-2">
                                    <div class="bg-warning h-2 rounded-full" style="width: 65%;"></div>
                                </div>
                                <div class="text-xs text-neutral-500 mt-1">进度: 65%</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤8: 执行投产业务验证 -->
                    <div class="border-l-4 border-neutral-200 pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-neutral-100 text-neutral-500 flex items-center justify-center">
                                    8
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">8. 执行投产业务验证</h3>
                                    <p class="text-sm text-neutral-500 mt-1">业务团队对上线功能进行业务流程验证</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-neutral-400">未开始</div>
                                <div class="text-xs text-neutral-500 mt-1">预计: 2024-06-13 09:00</div>
                                <div class="text-xs text-neutral-500">执行人: 郑十一</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤9: 执行投产回退 -->
                    <div class="border-l-4 border-neutral-200 pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-neutral-100 text-neutral-500 flex items-center justify-center">
                                    9
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">9. 执行投产回退</h3>
                                    <p class="text-sm text-neutral-500 mt-1">如验证不通过，执行回退方案恢复系统</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-neutral-400">未开始</div>
                                <div class="text-xs text-neutral-500 mt-1">待定</div>
                                <div class="text-xs text-neutral-500">执行人: 王十二</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 步骤10: 源代码版本追平 -->
                    <div class="border-l-4 border-neutral-200 pl-4 py-2">
                        <div class="flex items-start justify-between">
                            <div class="flex items-center space-x-3">
                                <div class="w-10 h-10 rounded-full bg-neutral-100 text-neutral-500 flex items-center justify-center">
                                    10
                                </div>
                                <div>
                                    <h3 class="font-medium text-neutral-700">10. 源代码版本追平</h3>
                                    <p class="text-sm text-neutral-500 mt-1">将生产环境代码与开发分支进行版本同步</p>
                                </div>
                            </div>
                            <div class="text-right">
                                <div class="text-sm font-medium text-neutral-400">未开始</div>
                                <div class="text-xs text-neutral-500 mt-1">预计: 2024-06-13 18:00</div>
                                <div class="text-xs text-neutral-500">执行人: 李十三</div>
                            </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>

            <!-- 已测试验证完成的需求清单 -->
            <div class="bg-white rounded-lg shadow-card p-4 md:p-6 mt-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-bold text-neutral-700">已测试验证完成的需求清单</h2>
                    <div class="flex items-center space-x-3">
                        <span class="px-3 py-1 text-sm bg-success/10 text-success rounded-full">
                            <i class="fa fa-check-circle mr-1"></i>测试完成
                        </span>
                        <!-- 自动投产提示 -->
                        <div class="flex items-center text-xs text-gray-600">
                            <i class="fa fa-info-circle mr-1"></i>
                            <span>部分系统支持</span>
                            <span class="px-2 py-0.5 bg-gray-100 text-gray-700 rounded ml-1">自动投产</span>
                        </div>
                    </div>
                </div>
                
                <!-- 需求列表 -->
                <div id="requirementsList" class="space-y-4">
                    <!-- 需求项将通过JavaScript动态生成 -->
                </div>
            </div>

            <!-- 操作按钮区域 -->
            <div class="mt-6 flex justify-end space-x-3">
                <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300">
                    <i class="fa fa-print mr-1"></i> 打印流程
                </button>
                <button class="px-4 py-2 border border-neutral-300 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300">
                    <i class="fa fa-file-text-o mr-1"></i> 导出报告
                </button>
                <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                    <i class="fa fa-history mr-1"></i> 查看历史记录
                </button>
            </div>
        </main>
    </div>

    <!-- 投产申请模态框 -->
    <div id="productionApplicationModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-dropdown max-w-3xl w-full max-h-[90vh] overflow-y-auto">
            <div class="sticky top-0 bg-white border-b border-neutral-200 px-6 py-4 flex items-center justify-between rounded-t-lg">
                <h3 class="text-xl font-bold text-neutral-700">投产申请</h3>
                <button onclick="closeProductionModal()" class="text-neutral-500 hover:text-neutral-700 transition-all-300">
                    <i class="fa fa-close text-2xl"></i>
                </button>
            </div>
            
            <div class="p-6">
                <form id="productionForm" class="space-y-4">
                    <!-- 申请标题 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            申请标题 <span class="text-danger">*</span>
                        </label>
                        <input type="text" id="applicationTitle" required
                            class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                            readonly>
                    </div>
                    
                    <!-- 申请描述 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            申请描述 <span class="text-danger">*</span>
                        </label>
                        <textarea id="applicationDesc" rows="3" required
                            class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                            placeholder="请输入投产申请的详细描述..."></textarea>
                    </div>
                    
                    <!-- 关联信息层级结构 -->
                    <div class="border-t border-neutral-200 pt-4">
                        <h4 class="text-sm font-semibold text-neutral-700 mb-3">
                            <i class="fa fa-sitemap text-primary mr-2"></i>关联信息层级结构
                        </h4>
                        
                        <!-- 第一层级：关联需求 -->
                        <div class="mb-3">
                            <label class="block text-sm font-medium text-neutral-700 mb-2">
                                <span class="inline-flex items-center justify-center w-5 h-5 bg-primary text-white rounded-full text-xs mr-1">1</span>
                                关联需求
                            </label>
                            <div id="relatedRequirements" class="bg-gradient-to-r from-primary/5 to-transparent rounded-md p-3 text-sm text-neutral-700 border-l-4 border-primary">
                                <!-- 动态填充 -->
                            </div>
                        </div>
                        
                        <!-- 第二层级：关联特性 -->
                        <div class="ml-6 mb-3">
                            <label class="block text-sm font-medium text-neutral-700 mb-2">
                                <span class="inline-flex items-center justify-center w-5 h-5 bg-secondary text-white rounded-full text-xs mr-1">2</span>
                                关联特性
                            </label>
                            <div id="relatedFeatures" class="bg-gradient-to-r from-secondary/5 to-transparent rounded-md p-3 text-sm text-neutral-700 border-l-4 border-secondary">
                                <!-- 动态填充 -->
                            </div>
                        </div>
                        
                        <!-- 第三层级：关联系统 -->
                        <div class="ml-12 mb-3">
                            <label class="block text-sm font-medium text-neutral-700 mb-2">
                                <span class="inline-flex items-center justify-center w-5 h-5 bg-success text-white rounded-full text-xs mr-1">3</span>
                                关联系统
                            </label>
                            <div id="relatedSystem" class="bg-gradient-to-r from-success/5 to-transparent rounded-md p-3 text-sm text-neutral-700 border-l-4 border-success">
                                <!-- 动态填充 -->
                            </div>
                        </div>
                        
                        <!-- 第四层级：关联制品包及版本号 -->
                        <div class="ml-16 mb-3">
                            <label class="block text-sm font-medium text-neutral-700 mb-2">
                                <span class="inline-flex items-center justify-center w-5 h-5 bg-warning text-white rounded-full text-xs mr-1">4</span>
                                关联制品包及版本号
                            </label>
                            <div id="relatedArtifacts" class="bg-gradient-to-r from-warning/5 to-transparent rounded-md p-3 text-sm text-neutral-700 border-l-4 border-warning">
                                <!-- 动态填充 -->
                            </div>
                        </div>
                    </div>
                    
                    <!-- 部署流程说明（移至申请人之前） -->
                    <div class="border-t border-neutral-200 pt-4 mt-4">
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            <i class="fa fa-info-circle text-primary mr-1"></i>部署流程说明
                        </label>
                        <div class="bg-primary/5 rounded-md p-3 text-sm text-neutral-600 mb-4">
                            本流程图展示IPDO系统的完整部署过程，包含8个发布单元，按指定顺序执行，部分单元支持并行部署以提高效率。
                        </div>
                        
                        <!-- 系统部署流程图 -->
                        <div class="bg-white border border-neutral-200 rounded-md p-4 overflow-x-auto" style="min-height: 300px;">
                            <div class="mb-3">
                                <div class="flex items-center justify-between">
                                    <h4 class="text-sm font-medium text-neutral-700">IPDO系统部署流程图</h4>
                                    <div class="flex items-center space-x-3 text-xs">
                                        <div class="flex items-center space-x-1">
                                            <div class="w-3 h-3 bg-primary/20 border-2 border-primary rounded"></div>
                                            <span class="text-neutral-600">本次涉及</span>
                                        </div>
                                        <div class="flex items-center space-x-1">
                                            <div class="w-3 h-3 bg-neutral-200 border-2 border-neutral-400 rounded"></div>
                                            <span class="text-neutral-600">未涉及</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <svg id="deploymentFlowChart" class="w-full" viewBox="0 0 850 250">
                                <defs>
                                    <marker id="arrowhead" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                                        <polygon points="0 0, 8 3, 0 6" fill="#64748b" />
                                    </marker>
                                    <marker id="arrowhead-active" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                                        <polygon points="0 0, 8 3, 0 6" fill="#0066cc" />
                                    </marker>
                                </defs>
                                
                                <!-- 开始节点 -->
                                <rect x="30" y="120" width="80" height="40" rx="4" fill="#f8fafc" stroke="#3b82f6" stroke-width="1.5" />
                                <text x="70" y="145" text-anchor="middle" fill="#1e40af" font-weight="bold" font-size="12">开始</text>
                                
                                <!-- DB节点 -->
                                <rect id="node-DB" x="150" y="120" width="80" height="40" rx="4" fill="#f0fdfa" stroke="#0d9488" stroke-width="1.5" />
                                <text x="190" y="142" text-anchor="middle" fill="#065f46" font-weight="bold" font-size="11">DB</text>
                                <text x="190" y="156" text-anchor="middle" fill="#065f46" font-size="8">IPDO-DB</text>
                                
                                <!-- SERVER节点 -->
                                <rect id="node-SERVER" x="270" y="120" width="80" height="40" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1.5" />
                                <text x="310" y="142" text-anchor="middle" fill="#92400e" font-weight="bold" font-size="11">SERVER</text>
                                <text x="310" y="156" text-anchor="middle" fill="#92400e" font-size="8">IPDO-SERVER</text>
                                
                                <!-- 并行部署提示 -->
                                <text x="390" y="80" text-anchor="middle" fill="#64748b" font-size="10" font-style="italic">并行部署</text>
                                
                                <!-- APP节点 -->
                                <rect id="node-APP" x="390" y="60" width="80" height="40" rx="4" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
                                <text x="430" y="82" text-anchor="middle" fill="#0369a1" font-weight="bold" font-size="11">APP</text>
                                <text x="430" y="96" text-anchor="middle" fill="#0369a1" font-size="8">IPDO-APP</text>
                                
                                <!-- WEB节点 -->
                                <rect id="node-WEB" x="390" y="120" width="80" height="40" rx="4" fill="#dbeafe" stroke="#3b82f6" stroke-width="1.5" />
                                <text x="430" y="142" text-anchor="middle" fill="#1e40af" font-weight="bold" font-size="11">WEB</text>
                                <text x="430" y="156" text-anchor="middle" fill="#1e40af" font-size="8">IPDO-WEB</text>
                                
                                <!-- BATCH节点 -->
                                <rect id="node-BATCH" x="390" y="180" width="80" height="40" rx="4" fill="#fce7f3" stroke="#db2777" stroke-width="1.5" />
                                <text x="430" y="202" text-anchor="middle" fill="#9d174d" font-weight="bold" font-size="11">BATCH</text>
                                <text x="430" y="216" text-anchor="middle" fill="#9d174d" font-size="8">IPDO-BATCH</text>
                                
                                <!-- FEX节点 -->
                                <rect id="node-FEX" x="510" y="120" width="80" height="40" rx="4" fill="#ede9fe" stroke="#8b5cf6" stroke-width="1.5" />
                                <text x="550" y="142" text-anchor="middle" fill="#5b21b6" font-weight="bold" font-size="11">FEX</text>
                                <text x="550" y="156" text-anchor="middle" fill="#5b21b6" font-size="8">IPDO-FEX</text>
                                
                                <!-- 并行部署提示2 -->
                                <text x="630" y="80" text-anchor="middle" fill="#64748b" font-size="10" font-style="italic">并行部署</text>
                                
                                <!-- PROCESS节点 -->
                                <rect id="node-PROCESS" x="630" y="60" width="80" height="40" rx="4" fill="#fef2f2" stroke="#ef4444" stroke-width="1.5" />
                                <text x="670" y="82" text-anchor="middle" fill="#b91c1c" font-weight="bold" font-size="11">PROCESS</text>
                                <text x="670" y="96" text-anchor="middle" fill="#b91c1c" font-size="8">IPDO-PROCESS</text>
                                
                                <!-- API节点 -->
                                <rect id="node-API" x="630" y="120" width="80" height="40" rx="4" fill="#dcfce7" stroke="#22c55e" stroke-width="1.5" />
                                <text x="670" y="142" text-anchor="middle" fill="#15803d" font-weight="bold" font-size="11">API</text>
                                <text x="670" y="156" text-anchor="middle" fill="#15803d" font-size="8">IPDO-API</text>
                                
                                <!-- 结束节点 -->
                                <rect x="750" y="90" width="80" height="40" rx="4" fill="#f8fafc" stroke="#64748b" stroke-width="1.5" />
                                <text x="790" y="115" text-anchor="middle" fill="#334155" font-weight="bold" font-size="12">结束</text>
                                
                                <!-- 连接线 - 水平主流程 -->
                                <line id="line-start-db" x1="110" y1="140" x2="150" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-db-server" x1="230" y1="140" x2="270" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-parallel-fex" x1="470" y1="140" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-process-end" x1="710" y1="80" x2="750" y2="110" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-api-end" x1="710" y1="140" x2="750" y2="130" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                
                                <!-- SERVER到并行节点的连接线 -->
                                <line id="line-server-app" x1="350" y1="140" x2="390" y2="80" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-server-web" x1="350" y1="140" x2="390" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-server-batch" x1="350" y1="140" x2="390" y2="200" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                
                                <!-- 并行节点到FEX的连接线 -->
                                <line id="line-app-fex" x1="470" y1="80" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-batch-fex" x1="470" y1="200" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                
                                <!-- FEX到并行节点的连接线 -->
                                <line id="line-fex-process" x1="590" y1="140" x2="630" y2="80" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                <line id="line-fex-api" x1="590" y1="140" x2="630" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead)" />
                                
                                <!-- 确保每个并行节点都连接前一个并行节点 -->
                                <line x1="470" y1="80" x2="470" y2="140" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrowhead)" />
                                <line x1="470" y1="140" x2="470" y2="200" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrowhead)" />
                                <line x1="710" y1="80" x2="710" y2="140" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" marker-end="url(#arrowhead)" />
                            </svg>
                        </div>
                    </div>
                    
                    <!-- 关联发布单元 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            <i class="fa fa-cubes text-primary mr-1"></i>关联发布单元
                        </label>
                        <div id="relatedDeployUnits" class="space-y-2">
                            <!-- 动态填充 -->
                        </div>
                    </div>
                    
                    <!-- 申请人和申请时间 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4 border-t border-neutral-200 pt-4">
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-2">申请人</label>
                            <input type="text" id="applicant" value="张三" readonly
                                class="w-full px-4 py-2 border border-neutral-300 rounded-md bg-neutral-50">
                        </div>
                        <div>
                            <label class="block text-sm font-medium text-neutral-700 mb-2">申请时间</label>
                            <input type="text" id="applicationTime" readonly
                                class="w-full px-4 py-2 border border-neutral-300 rounded-md bg-neutral-50">
                        </div>
                    </div>
                    
                    <!-- 投产类型 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            投产类型 <span class="text-danger">*</span>
                        </label>
                        <select id="productionType" required
                            class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                            <option value="">请选择投产类型</option>
                            <option value="auto">自动</option>
                            <option value="major">大版本</option>
                            <option value="urgent">紧急</option>
                            <option value="critical">非常紧急</option>
                        </select>
                    </div>
                    
                    <!-- 预计投产时间 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            预计投产时间 <span class="text-danger">*</span>
                        </label>
                        <input type="datetime-local" id="expectedTime" required
                            class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary">
                    </div>
                    
                    <!-- 影响范围说明 -->
                    <div>
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            影响范围说明 <span class="text-danger">*</span>
                        </label>
                        <textarea id="impactScope" rows="4" required
                            class="w-full px-4 py-2 border border-neutral-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary"
                            placeholder="请详细说明本次投产的影响范围，包括涉及的系统模块、用户群体、业务流程等..."></textarea>
                    </div>
                    
                    <!-- 投产关联在线文档清单 -->
                    <div class="border-t border-neutral-200 pt-4">
                        <label class="block text-sm font-medium text-neutral-700 mb-2">
                            <i class="fa fa-file-text-o text-primary mr-1"></i>投产关联在线文档清单
                        </label>
                        <div id="relatedDocuments" class="space-y-2">
                            <!-- 动态填充文档列表 -->
                        </div>
                    </div>
                    
                    <!-- 按钮组 -->
                    <div class="flex justify-end space-x-3 pt-4 border-t border-neutral-200">
                        <button type="button" onclick="closeProductionModal()"
                            class="px-6 py-2 border border-neutral-300 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300">
                            取消
                        </button>
                        <button type="submit"
                            class="px-6 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                            <i class="fa fa-paper-plane mr-1"></i>提交申请
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 文档详情模态框 -->
    <div id="documentDetailModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-dropdown max-w-4xl w-full max-h-[90vh] overflow-hidden flex flex-col">
            <div class="sticky top-0 bg-white border-b border-neutral-200 px-6 py-4 flex items-center justify-between rounded-t-lg">
                <h3 class="text-xl font-bold text-neutral-700" id="documentDetailTitle">文档详情</h3>
                <button onclick="closeDocumentModal()" class="text-neutral-500 hover:text-neutral-700 transition-all-300">
                    <i class="fa fa-close text-2xl"></i>
                </button>
            </div>
            
            <div class="overflow-y-auto flex-1 p-6" id="documentDetailContent">
                <!-- 文档内容将动态加载 -->
            </div>
            
            <div class="sticky bottom-0 bg-white border-t border-neutral-200 px-6 py-4 flex justify-end rounded-b-lg">
                <button onclick="closeDocumentModal()" class="px-4 py-2 bg-neutral-200 text-neutral-700 rounded-md hover:bg-neutral-300 transition-all-300">
                    关闭
                </button>
            </div>
        </div>
    </div>

    <script>
        /*
         * 投产系统配置说明：
         * - 自动投产系统：USMS(用户管理系统), PYMT(支付系统)
         * - 手动投产系统：其他所有系统
         * - 自动投产按钮使用灰色样式(bg-gray-400)区分于普通投产申请
         */
        
        // 需求数据
        const requirementsData = [
            {
                id: 'REQ-2024-001',
                name: '用户登录多因素认证优化',
                priority: '高',
                features: [
                    {
                        id: 'FEAT-001',
                        name: '短信验证码登录',
                        systems: [
                            { id: 'USMS', name: '用户管理系统', type: '核心系统', owner: '李四' },
                            { id: 'SMSG', name: '短信网关服务', type: '支撑系统', owner: '王五' }
                        ]
                    },
                    {
                        id: 'FEAT-002',
                        name: '邮箱验证登录',
                        systems: [
                            { id: 'USMS', name: '用户管理系统', type: '核心系统', owner: '李四' },
                            { id: 'EMLG', name: '邮件网关服务', type: '支撑系统', owner: '赵六' }
                        ]
                    }
                ]
            },
            {
                id: 'REQ-2024-002',
                name: '支付流程性能优化',
                priority: '中',
                features: [
                    {
                        id: 'FEAT-003',
                        name: '支付接口异步处理',
                        systems: [
                            { id: 'PYMT', name: '支付系统', type: '核心系统', owner: '钱七' },
                            { id: 'MQSV', name: '消息队列服务', type: '支撑系统', owner: '孙八' }
                        ]
                    }
                ]
            },
            {
                id: 'REQ-2024-003',
                name: '订单查询功能增强',
                priority: '低',
                features: [
                    {
                        id: 'FEAT-004',
                        name: '高级筛选功能',
                        systems: [
                            { id: 'ORDR', name: '订单管理系统', type: '核心系统', owner: '周九' }
                        ]
                    },
                    {
                        id: 'FEAT-005',
                        name: '订单导出功能',
                        systems: [
                            { id: 'ORDR', name: '订单管理系统', type: '核心系统', owner: '周九' },
                            { id: 'RPTS', name: '报表服务', type: '支撑系统', owner: '吴十' }
                        ]
                    }
                ]
            }
        ];

        // 时间格式化函数
        function formatDateTime(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            return `${year}-${month}-${day} ${hours}:${minutes}`;
        }

        // 获取优先级样式
        function getPriorityClass(priority) {
            const priorityMap = {
                '高': 'bg-danger/10 text-danger',
                '中': 'bg-warning/10 text-warning',
                '低': 'bg-neutral-200 text-neutral-600'
            };
            return priorityMap[priority] || 'bg-neutral-200 text-neutral-600';
        }
        
        // 文档数据
        const documentData = {
            'USMS': [
                { id: 'DOC-001', name: '用户管理系统运维手册', url: '#', type: '运维手册', content: '<h2>用户管理系统运维手册</h2><p>本手册详细介绍了用户管理系统的部署、配置、监控和故障处理等运维操作。</p><h3>系统架构</h3><p>用户管理系统采用微服务架构，包含用户认证、权限管理、用户信息管理等核心模块。</p><h3>部署说明</h3><p>系统部署需要以下环境：Java 11+, MySQL 8.0+, Redis 6.0+</p>' },
                { id: 'DOC-002', name: '用户管理系统测试报告', url: '#', type: '测试报告', content: '<h2>用户管理系统测试报告</h2><p>本次测试覆盖了用户注册、登录、权限验证等核心功能。</p><h3>测试结果</h3><ul><li>功能测试：通过 95%</li><li>性能测试：响应时间 &lt; 200ms</li><li>安全测试：通过 OWASP 检查</li></ul>' },
                { id: 'DOC-003', name: '用户管理系统业务模型变更清单', url: '#', type: '变更清单', content: '<h2>用户管理系统业务模型变更清单</h2><p>本次投产涉及以下业务模型变更：</p><ul><li>新增多因素认证模块</li><li>优化用户权限管理逻辑</li><li>增强用户数据安全保护</li></ul>' },
                { id: 'DOC-009', name: '用户管理系统模型变更文档', url: '#', type: '模型变更', content: '<h2>用户管理系统模型变更文档</h2><p>本文档详细描述了用户管理系统在本次投产中的模型变更内容。</p><h3>变更概述</h3><p>本次模型变更主要涉及用户认证模块和权限管理模块的重构。</p><h3>详细变更内容</h3><ul><li>用户实体增加多因素认证字段</li><li>权限模型从RBAC升级为ABAC</li><li>用户组支持嵌套结构</li></ul>' },
                { id: 'DOC-010', name: '用户管理系统应急预案', url: '#', type: '应急预案', content: '<h2>用户管理系统应急预案</h2><p>本文档提供了用户管理系统在投产过程中可能出现的异常情况及应对措施。</p><h3>常见故障场景</h3><ul><li>认证服务不可用</li><li>权限同步延迟</li><li>数据库连接异常</li></ul><h3>应急处理流程</h3><p>1. 立即通知运维团队<br>2. 启动备用认证服务<br>3. 回滚权限配置<br>4. 监控系统状态</p>' },
                { id: 'DOC-011', name: '用户管理系统应急投产操作手册', url: '#', type: '应急手册', content: '<h2>用户管理系统应急投产操作手册</h2><p>本文档提供了在紧急情况下快速投产用户管理系统的操作指南。</p><h3>应急投产前提</h3><p>仅在主投产流程失败且业务急需上线时使用。</p><h3>操作步骤</h3><ol><li>确认环境状态</li><li>执行快速部署脚本</li><li>验证核心功能</li><li>通知相关团队</li></ol>' }
            ],
            'PYMT': [
                { id: 'DOC-004', name: '支付系统运维手册', url: '#', type: '运维手册', content: '<h2>支付系统运维手册</h2><p>本手册详细介绍了支付系统的部署、配置、监控和故障处理等运维操作。</p><h3>系统架构</h3><p>支付系统采用分布式架构，包含支付网关、交易处理、对账等核心模块。</p>' },
                { id: 'DOC-005', name: '支付系统测试报告', url: '#', type: '测试报告', content: '<h2>支付系统测试报告</h2><p>本次测试覆盖了支付创建、处理、回调等核心功能。</p><h3>测试结果</h3><ul><li>功能测试：通过 98%</li><li>性能测试：TPS &gt; 1000</li><li>安全测试：通过 PCI DSS 认证</li></ul>' },
                { id: 'DOC-006', name: '支付系统业务模型变更清单', url: '#', type: '变更清单', content: '<h2>支付系统业务模型变更清单</h2><p>本次投产涉及以下业务模型变更：</p><ul><li>新增异步支付处理机制</li><li>优化交易对账流程</li><li>增强风控策略</li></ul>' },
                { id: 'DOC-012', name: '支付系统模型变更文档', url: '#', type: '模型变更', content: '<h2>支付系统模型变更文档</h2><p>本文档详细描述了支付系统在本次投产中的模型变更内容。</p><h3>变更概述</h3><p>本次模型变更主要涉及支付订单模型和风控模型的优化。</p><h3>详细变更内容</h3><ul><li>支付订单状态机优化</li><li>新增风控规则引擎</li><li>支持多币种支付</li></ul>' },
                { id: 'DOC-013', name: '支付系统应急预案', url: '#', type: '应急预案', content: '<h2>支付系统应急预案</h2><p>本文档提供了支付系统在投产过程中可能出现的异常情况及应对措施。</p><h3>常见故障场景</h3><ul><li>支付网关响应超时</li><li>交易对账不平</li><li>风控策略误判</li></ul><h3>应急处理流程</h3><p>1. 立即暂停相关支付渠道<br>2. 启动人工对账流程<br>3. 调整风控策略<br>4. 监控交易流水</p>' },
                { id: 'DOC-014', name: '支付系统应急投产操作手册', url: '#', type: '应急手册', content: '<h2>支付系统应急投产操作手册</h2><p>本文档提供了在紧急情况下快速投产支付系统的操作指南。</p><h3>应急投产前提</h3><p>仅在主投产流程失败且业务急需上线时使用。</p><h3>操作步骤</h3><ol><li>确认支付渠道状态</li><li>执行快速部署脚本</li><li>验证核心支付流程</li><li>通知相关团队</li></ol>' }
            ],
            'ORDR': [
                { id: 'DOC-007', name: '订单管理系统运维手册', url: '#', type: '运维手册', content: '<h2>订单管理系统运维手册</h2><p>本手册详细介绍了订单管理系统的部署、配置、监控和故障处理等运维操作。</p><h3>系统架构</h3><p>订单管理系统采用微服务架构，包含订单创建、状态管理、查询等核心模块。</p>' },
                { id: 'DOC-008', name: '订单管理系统测试报告', url: '#', type: '测试报告', content: '<h2>订单管理系统测试报告</h2><p>本次测试覆盖了订单创建、修改、查询等核心功能。</p><h3>测试结果</h3><ul><li>功能测试：通过 96%</li><li>性能测试：查询响应时间 &lt; 100ms</li><li>安全测试：通过数据加密检查</li></ul>' },
                { id: 'DOC-015', name: '订单管理系统模型变更文档', url: '#', type: '模型变更', content: '<h2>订单管理系统模型变更文档</h2><p>本文档详细描述了订单管理系统在本次投产中的模型变更内容。</p><h3>变更概述</h3><p>本次模型变更主要涉及订单状态模型和商品信息模型的优化。</p><h3>详细变更内容</h3><ul><li>订单状态机细化</li><li>商品信息支持多语言</li><li>新增订单评价模型</li></ul>' },
                { id: 'DOC-016', name: '订单管理系统应急预案', url: '#', type: '应急预案', content: '<h2>订单管理系统应急预案</h2><p>本文档提供了订单管理系统在投产过程中可能出现的异常情况及应对措施。</p><h3>常见故障场景</h3><ul><li>订单创建失败</li><li>订单状态更新延迟</li><li>库存同步异常</li></ul><h3>应急处理流程</h3><p>1. 立即通知订单处理团队<br>2. 检查库存服务状态<br>3. 手动处理异常订单<br>4. 监控订单流水</p>' },
                { id: 'DOC-017', name: '订单管理系统应急投产操作手册', url: '#', type: '应急手册', content: '<h2>订单管理系统应急投产操作手册</h2><p>本文档提供了在紧急情况下快速投产订单管理系统的操作指南。</p><h3>应急投产前提</h3><p>仅在主投产流程失败且业务急需上线时使用。</p><h3>操作步骤</h3><ol><li>确认库存服务状态</li><li>执行快速部署脚本</li><li>验证核心订单流程</li><li>通知相关团队</li></ol>' }
            ]
        };

        // 生成需求列表
        function generateRequirementsList() {
            const container = document.getElementById('requirementsList');
            container.innerHTML = '';
            
            requirementsData.forEach((req, reqIndex) => {
                const reqDiv = document.createElement('div');
                reqDiv.className = 'border border-neutral-200 rounded-lg overflow-hidden';
                
                // 需求头部
                const reqHeader = `
                    <div class="bg-neutral-50 px-4 py-3 flex items-center justify-between cursor-pointer hover:bg-neutral-100 transition-all-300"
                         onclick="toggleRequirement('req-${reqIndex}')">
                        <div class="flex items-center space-x-3">
                            <i class="fa fa-chevron-down transition-transform duration-300" id="req-${reqIndex}-icon"></i>
                            <div>
                                <div class="font-medium text-neutral-700">${req.id}: ${req.name}</div>
                                <div class="text-xs text-neutral-500 mt-1">包含 ${req.features.length} 个特性</div>
                            </div>
                        </div>
                        <span class="px-3 py-1 text-xs rounded-full ${getPriorityClass(req.priority)}">${req.priority}</span>
                    </div>
                `;
                
                // 特性列表（默认展开）
                let featuresHTML = '<div id="req-' + reqIndex + '-content" class="px-4 py-3 space-y-3">';
                
                req.features.forEach((feat, featIndex) => {
                    featuresHTML += `
                        <div class="border-l-4 border-primary pl-3 py-2">
                            <div class="flex items-center justify-between mb-2">
                                <div class="font-medium text-sm text-neutral-700">${feat.id}: ${feat.name}</div>
                                <button onclick="toggleSystems('feat-${reqIndex}-${featIndex}')"
                                    class="text-xs text-primary hover:text-primary/80 transition-all-300">
                                    <i class="fa fa-chevron-down transition-transform duration-300" id="feat-${reqIndex}-${featIndex}-icon"></i>
                                    关联系统 (${feat.systems.length})
                                </button>
                            </div>
                            
                            <!-- 系统表格 -->
                            <div id="feat-${reqIndex}-${featIndex}-systems" class="mt-2">
                                <table class="w-full text-sm">
                                    <thead class="bg-neutral-50">
                                        <tr>
                                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-600">系统标识</th>
                                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-600">系统名称</th>
                                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-600">系统类型</th>
                                            <th class="px-3 py-2 text-left text-xs font-medium text-neutral-600">负责人</th>
                                            <th class="px-3 py-2 text-right text-xs font-medium text-neutral-600">操作</th>
                                        </tr>
                                    </thead>
                                    <tbody class="bg-white divide-y divide-neutral-200">
                    `;
                    
                    feat.systems.forEach((sys, sysIndex) => {
                        const systemData = JSON.stringify({
                            requirement: { id: req.id, name: req.name },
                            feature: { id: feat.id, name: feat.name },
                            system: sys
                        }).replace(/"/g, '&quot;');
                        
                        // 随机选择两个系统作为自动投产：USMS和PYMT
                        const isAutoProduction = sys.id === 'USMS' || sys.id === 'PYMT';
                        const buttonClass = isAutoProduction 
                            ? 'px-3 py-1 bg-gray-400 text-white text-xs rounded hover:bg-gray-500 transition-all-300'
                            : 'px-3 py-1 bg-success text-white text-xs rounded hover:bg-success/90 transition-all-300';
                        const buttonText = isAutoProduction ? '自动投产' : '投产申请';
                        const buttonIcon = isAutoProduction ? 'fa-cogs' : 'fa-rocket';
                        const buttonAction = isAutoProduction 
                            ? `showAutoProductionInfo(${systemData})`
                            : `openProductionModal(${systemData})`;
                        
                        featuresHTML += `
                            <tr class="hover:bg-neutral-50">
                                <td class="px-3 py-2 font-mono text-primary font-medium">${sys.id}</td>
                                <td class="px-3 py-2">${sys.name}</td>
                                <td class="px-3 py-2">
                                    <span class="px-2 py-1 text-xs rounded ${sys.type === '核心系统' ? 'bg-primary/10 text-primary' : 'bg-secondary/10 text-secondary'}">${sys.type}</span>
                                </td>
                                <td class="px-3 py-2">${sys.owner}</td>
                                <td class="px-3 py-2 text-right">
                                    <button onclick='${buttonAction}'
                                        class="${buttonClass}">
                                        <i class="fa ${buttonIcon} mr-1"></i>${buttonText}
                                    </button>
                                </td>
                            </tr>
                        `;
                    });
                    
                    featuresHTML += `
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    `;
                });
                
                featuresHTML += '</div>';
                
                reqDiv.innerHTML = reqHeader + featuresHTML;
                container.appendChild(reqDiv);
            });
        }

        // 切换需求展开/收起
        function toggleRequirement(reqId) {
            const content = document.getElementById(reqId + '-content');
            const icon = document.getElementById(reqId + '-icon');
            
            if (content.style.display === 'none') {
                content.style.display = 'block';
                icon.style.transform = 'rotate(0deg)';
            } else {
                content.style.display = 'none';
                icon.style.transform = 'rotate(-90deg)';
            }
        }

        // 切换系统列表展开/收起
        function toggleSystems(featId) {
            const systems = document.getElementById(featId + '-systems');
            const icon = document.getElementById(featId + '-icon');
            
            if (systems.style.display === 'none') {
                systems.style.display = 'block';
                icon.style.transform = 'rotate(0deg)';
            } else {
                systems.style.display = 'none';
                icon.style.transform = 'rotate(-90deg)';
            }
        }

        // 显示自动投产信息（新增功能）
        function showAutoProductionInfo(data) {
            // 生成自动投产信息
            const autoProductionInfo = {
                system: data.system,
                requirement: data.requirement,
                feature: data.feature,
                autoStartTime: new Date().toLocaleString('zh-CN'),
                estimatedDuration: '15-30分钟',
                status: '准备中',
                approvalRequired: false,
                deploymentUnits: getAutoDeploymentUnits(data.system.id)
            };
            
            // 控制台输出详细信息
            console.log('=== 自动投产信息 ===');
            console.log('系统信息:', autoProductionInfo.system);
            console.log('关联需求:', autoProductionInfo.requirement);
            console.log('关联特性:', autoProductionInfo.feature);
            console.log('预计开始时间:', autoProductionInfo.autoStartTime);
            console.log('预计持续时间:', autoProductionInfo.estimatedDuration);
            console.log('部署单元:', autoProductionInfo.deploymentUnits);
            
            // 优雅的弹窗提示
            const message = `
🤖 自动投产信息

📦 系统: ${data.system.id} - ${data.system.name}
📋 需求: ${data.requirement.id}
🔧 特性: ${data.feature.name}

⏰ 预计开始: ${autoProductionInfo.autoStartTime}
⏱️ 预计时长: ${autoProductionInfo.estimatedDuration}
⚙️ 部署单元: ${autoProductionInfo.deploymentUnits.length}个

✅ 无需人工审批，系统将自动执行投产流程。
            `;
            
            alert(message);
            
            // 可选：自动启动投产流程（模拟）
            setTimeout(() => {
                console.log(`🚀 自动投产已启动 - ${data.system.name}`);
            }, 2000);
        }
        
        // 切换流程详情展开/收起状态
        function toggleProcessDetails() {
            const content = document.getElementById('processDetailsContent');
            const icon = document.getElementById('processDetailsIcon');
            const isCollapsed = content.style.maxHeight === '0px' || content.style.maxHeight === '';
            
            if (isCollapsed) {
                // 展开
                // 先设置为auto以获取实际高度
                content.style.maxHeight = 'none';
                const actualHeight = content.scrollHeight;
                content.style.maxHeight = '0px';
                
                // 强制重绘后设置实际高度
                requestAnimationFrame(() => {
                    content.style.maxHeight = actualHeight + 'px';
                    content.style.opacity = '1';
                    content.style.marginTop = '16px';
                });
                
                icon.style.transform = 'rotate(0deg)';
            } else {
                // 收起
                content.style.maxHeight = '0px';
                content.style.opacity = '0';
                content.style.marginTop = '0px';
                icon.style.transform = 'rotate(-90deg)';
            }
        }
        
        // 获取自动部署单元信息
        function getAutoDeploymentUnits(systemId) {
            const deployUnitsMap = {
                'USMS': ['IPDO-SERVER', 'IPDO-API'],
                'PYMT': ['IPDO-SERVER', 'IPDO-PROCESS'],
                // 其他系统保持手动投产
                'SMSG': ['IPDO-FEX'],
                'EMLG': ['IPDO-FEX'],
                'MQSV': ['IPDO-SERVER'],
                'ORDR': ['IPDO-WEB', 'IPDO-API'],
                'RPTS': ['IPDO-BATCH']
            };
            return deployUnitsMap[systemId] || [];
        }

        // 打开投产申请模态框
        function openProductionModal(data) {
            const modal = document.getElementById('productionApplicationModal');
            
            // 填充表单数据
            document.getElementById('applicationTitle').value = data.system.name + ' - 投产申请';
            document.getElementById('relatedRequirements').innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fa fa-tag text-neutral-500"></i>
                    <span>${data.requirement.id}: ${data.requirement.name}</span>
                </div>
            `;
            document.getElementById('relatedFeatures').innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fa fa-cube text-neutral-500"></i>
                    <span>${data.feature.id}: ${data.feature.name}</span>
                </div>
            `;
            document.getElementById('relatedSystem').innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fa fa-server text-neutral-500"></i>
                    <span>${data.system.id} - ${data.system.name} (${data.system.type})</span>
                </div>
            `;
            document.getElementById('applicationTime').value = formatDateTime(new Date());
            
            // 生成关联制品包信息
            generateArtifactInfo(data.system.id);
            
            // 生成关联发布单元信息
            generateDeployUnits(data.system.id);
            
            // 生成关联文档清单
            generateDocumentList(data.system.id);
            
            // 更新部署流程图高亮状态
            updateDeploymentFlowChart(data.system.id);
            
            // 存储数据供提交使用
            modal.dataset.applicationData = JSON.stringify(data);
            
            // 显示模态框
            modal.classList.remove('hidden');
        }

        // 更新部署流程图高亮状态
        function updateDeploymentFlowChart(systemId) {
            // 获取当前系统涉及的发布单元
            const deployUnitsMap = {
                'USMS': ['SERVER', 'API'],
                'SMSG': ['FEX'],
                'EMLG': ['FEX'],
                'PYMT': ['SERVER', 'PROCESS'],
                'MQSV': ['SERVER'],
                'ORDR': ['WEB', 'API'],
                'RPTS': ['BATCH']
            };
            
            const involvedUnits = deployUnitsMap[systemId] || ['SERVER'];
            
            // 重置所有节点样式为默认状态
            const allUnits = ['DB', 'SERVER', 'APP', 'WEB', 'BATCH', 'FEX', 'PROCESS', 'API'];
            allUnits.forEach(unit => {
                const node = document.getElementById(`node-${unit}`);
                if (node) {
                    // 设置为未涉及状态（灰色）
                    node.setAttribute('fill', '#f5f5f5');
                    node.setAttribute('stroke', '#9ca3af');
                    node.setAttribute('stroke-width', '1');
                    node.setAttribute('opacity', '0.6');
                }
            });
            
            // 高亮涉及的发布单元
            involvedUnits.forEach(unit => {
                const node = document.getElementById(`node-${unit}`);
                if (node) {
                    // 恢复原有样式并加强高亮
                    const originalStyles = getOriginalNodeStyle(unit);
                    node.setAttribute('fill', originalStyles.fill);
                    node.setAttribute('stroke', '#0066cc');
                    node.setAttribute('stroke-width', '2.5');
                    node.setAttribute('opacity', '1');
                    
                    // 添加高亮边框效果
                    node.style.filter = 'drop-shadow(0 0 6px rgba(0, 102, 204, 0.4))';
                }
            });
            
            // 更新连接线样式
            updateConnectionLines(involvedUnits);
            
            // 显示特别标识
            addHighlightIndicators(involvedUnits);
        }
        
        // 获取节点原始样式
        function getOriginalNodeStyle(unit) {
            const styles = {
                'DB': { fill: '#f0fdfa', stroke: '#0d9488' },
                'SERVER': { fill: '#fef3c7', stroke: '#d97706' },
                'APP': { fill: '#e0f2fe', stroke: '#0284c7' },
                'WEB': { fill: '#dbeafe', stroke: '#3b82f6' },
                'BATCH': { fill: '#fce7f3', stroke: '#db2777' },
                'FEX': { fill: '#ede9fe', stroke: '#8b5cf6' },
                'PROCESS': { fill: '#fef2f2', stroke: '#ef4444' },
                'API': { fill: '#dcfce7', stroke: '#22c55e' }
            };
            return styles[unit] || { fill: '#f5f5f5', stroke: '#9ca3af' };
        }
        
        // 更新连接线样式
        function updateConnectionLines(involvedUnits) {
            // 重置所有连接线
            const allLines = [
                'line-start-db', 'line-db-server', 'line-server-app', 'line-server-web', 'line-server-batch',
                'line-app-fex', 'line-batch-fex', 'line-parallel-fex', 'line-fex-process', 'line-fex-api',
                'line-process-end', 'line-api-end'
            ];
            
            allLines.forEach(lineId => {
                const line = document.getElementById(lineId);
                if (line) {
                    line.setAttribute('stroke', '#d1d5db');
                    line.setAttribute('stroke-width', '1');
                    line.setAttribute('opacity', '0.5');
                    line.setAttribute('marker-end', 'url(#arrowhead)');
                }
            });
            
            // 高亮涉及的连接线
            const lineMapping = {
                'SERVER': ['line-db-server', 'line-server-app', 'line-server-web', 'line-server-batch'],
                'APP': ['line-server-app', 'line-app-fex'],
                'WEB': ['line-server-web', 'line-parallel-fex'],
                'BATCH': ['line-server-batch', 'line-batch-fex'],
                'FEX': ['line-parallel-fex', 'line-fex-process', 'line-fex-api'],
                'PROCESS': ['line-fex-process', 'line-process-end'],
                'API': ['line-fex-api', 'line-api-end']
            };
            
            const activeLines = new Set();
            involvedUnits.forEach(unit => {
                if (lineMapping[unit]) {
                    lineMapping[unit].forEach(lineId => activeLines.add(lineId));
                }
            });
            
            // 始终高亮起始线
            activeLines.add('line-start-db');
            
            activeLines.forEach(lineId => {
                const line = document.getElementById(lineId);
                if (line) {
                    line.setAttribute('stroke', '#0066cc');
                    line.setAttribute('stroke-width', '2');
                    line.setAttribute('opacity', '1');
                    line.setAttribute('marker-end', 'url(#arrowhead-active)');
                }
            });
        }
        
        // 添加高亮指示器
        function addHighlightIndicators(involvedUnits) {
            // 移除旧的指示器
            const oldIndicators = document.querySelectorAll('.highlight-indicator');
            oldIndicators.forEach(indicator => indicator.remove());
            
            const svg = document.getElementById('deploymentFlowChart');
            
            involvedUnits.forEach(unit => {
                const node = document.getElementById(`node-${unit}`);
                if (node) {
                    // 获取节点位置
                    const x = parseFloat(node.getAttribute('x'));
                    const y = parseFloat(node.getAttribute('y'));
                    
                    // 创建高亮指示器（小圆点）
                    const indicator = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
                    indicator.setAttribute('class', 'highlight-indicator');
                    indicator.setAttribute('cx', x + 70);
                    indicator.setAttribute('cy', y + 10);
                    indicator.setAttribute('r', '4');
                    indicator.setAttribute('fill', '#ef4444');
                    indicator.setAttribute('stroke', '#ffffff');
                    indicator.setAttribute('stroke-width', '1');
                    
                    // 添加动画效果
                    const animate = document.createElementNS('http://www.w3.org/2000/svg', 'animate');
                    animate.setAttribute('attributeName', 'r');
                    animate.setAttribute('values', '3;5;3');
                    animate.setAttribute('dur', '2s');
                    animate.setAttribute('repeatCount', 'indefinite');
                    indicator.appendChild(animate);
                    
                    svg.appendChild(indicator);
                }
            });
        }

        // 生成关联制品包及版本号信息
        function generateArtifactInfo(systemId) {
            const artifactContainer = document.getElementById('relatedArtifacts');
            
            // 制品包数据映射
            const artifactMap = {
                'USMS': { name: 'usms-service', version: 'v2.3.1-20240610' },
                'SMSG': { name: 'sms-gateway', version: 'v1.8.5-20240608' },
                'EMLG': { name: 'email-gateway', version: 'v1.6.2-20240605' },
                'PYMT': { name: 'payment-service', version: 'v3.1.0-20240612' },
                'MQSV': { name: 'mq-service', version: 'v2.0.4-20240601' },
                'ORDR': { name: 'order-service', version: 'v2.5.3-20240611' },
                'RPTS': { name: 'report-service', version: 'v1.4.1-20240607' }
            };
            
            const artifact = artifactMap[systemId] || { name: 'unknown-artifact', version: 'v1.0.0' };
            
            artifactContainer.innerHTML = `
                <div class="flex items-center space-x-2">
                    <i class="fa fa-archive text-neutral-500"></i>
                    <span class="font-medium">${artifact.name}-${artifact.version}</span>
                    <span class="px-2 py-0.5 text-xs bg-success/10 text-success rounded">已构建</span>
                </div>
            `;
        }
        
        // 生成关联文档清单
        function generateDocumentList(systemId) {
            const documentContainer = document.getElementById('relatedDocuments');
            
            // 获取系统对应的文档
            const documents = documentData[systemId] || [];
            
            if (documents.length === 0) {
                documentContainer.innerHTML = `
                    <div class="text-center py-4 text-neutral-500">
                        <i class="fa fa-file-o text-2xl mb-2"></i>
                        <p>暂无关联文档</p>
                    </div>
                `;
                return;
            }
            
            // 生成文档列表
            documentContainer.innerHTML = documents.map((doc, index) => `
                <div class="flex items-center justify-between p-3 bg-neutral-50 rounded-md border border-neutral-200 hover:border-primary/30 transition-all-300 cursor-pointer" 
                     onclick="openDocumentDetail('${doc.id}', '${systemId}')">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary font-bold text-sm">
                            ${index + 1}
                        </div>
                        <div>
                            <div class="font-medium text-neutral-700">${doc.name}</div>
                            <div class="text-xs text-neutral-500">
                                <i class="fa fa-tag mr-1"></i>${doc.type}
                            </div>
                        </div>
                    </div>
                    <i class="fa fa-external-link text-neutral-400"></i>
                </div>
            `).join('');
        }

        // 生成关联发布单元信息
        function generateDeployUnits(systemId) {
            const deployUnitsContainer = document.getElementById('relatedDeployUnits');
            
            // 发布单元数据映射
            const deployUnitsMap = {
                'USMS': [
                    { id: 'IPDO-SERVER', name: 'ipdo-server', type: 'SERVER', order: 2 },
                    { id: 'IPDO-API', name: 'ipdo-api', type: 'API', order: 8 }
                ],
                'SMSG': [
                    { id: 'IPDO-FEX', name: 'ipdo-fex', type: 'FEX', order: 6 }
                ],
                'EMLG': [
                    { id: 'IPDO-FEX', name: 'ipdo-fex', type: 'FEX', order: 6 }
                ],
                'PYMT': [
                    { id: 'IPDO-SERVER', name: 'ipdo-server', type: 'SERVER', order: 2 },
                    { id: 'IPDO-PROCESS', name: 'ipdo-process', type: 'PROCESS', order: 7 }
                ],
                'MQSV': [
                    { id: 'IPDO-SERVER', name: 'ipdo-server', type: 'SERVER', order: 2 }
                ],
                'ORDR': [
                    { id: 'IPDO-WEB', name: 'ipdo-web', type: 'WEB', order: 4 },
                    { id: 'IPDO-API', name: 'ipdo-api', type: 'API', order: 8 }
                ],
                'RPTS': [
                    { id: 'IPDO-BATCH', name: 'ipdo-batch', type: 'BATCH', order: 5 }
                ]
            };
            
            const units = deployUnitsMap[systemId] || [
                { id: 'IPDO-SERVER', name: 'ipdo-server', type: 'SERVER', order: 2 }
            ];
            
            // 按部署顺序排序
            units.sort((a, b) => a.order - b.order);
            
            deployUnitsContainer.innerHTML = units.map((unit, index) => `
                <div class="flex items-center justify-between p-3 bg-neutral-50 rounded-md border border-neutral-200 hover:border-primary/30 transition-all-300">
                    <div class="flex items-center space-x-3">
                        <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary font-bold text-sm">
                            ${index + 1}
                        </div>
                        <div>
                            <div class="font-medium text-neutral-700">${unit.id}</div>
                            <div class="text-xs text-neutral-500">
                                <i class="fa fa-code-fork mr-1"></i>${unit.name}
                            </div>
                        </div>
                    </div>
                    <span class="px-2 py-1 text-xs font-medium bg-primary/10 text-primary rounded-full">${unit.type}</span>
                </div>
            `).join('');
        }

        // 关闭投产申请模态框
        function closeProductionModal() {
            const modal = document.getElementById('productionApplicationModal');
            modal.classList.add('hidden');
            document.getElementById('productionForm').reset();
            
            // 清理流程图高亮状态
            resetDeploymentFlowChart();
        }
        
        // 打开文档详情模态框
        function openDocumentDetail(docId, systemId) {
            const documents = documentData[systemId] || [];
            const doc = documents.find(d => d.id === docId);
            
            if (!doc) return;
            
            // 填充文档详情
            document.getElementById('documentDetailTitle').textContent = doc.name;
            document.getElementById('documentDetailContent').innerHTML = doc.content;
            
            // 显示模态框
            document.getElementById('documentDetailModal').classList.remove('hidden');
        }
        
        // 关闭文档详情模态框
        function closeDocumentModal() {
            document.getElementById('documentDetailModal').classList.add('hidden');
            document.getElementById('documentDetailContent').innerHTML = '';
        }
        
        // 重置部署流程图状态
        function resetDeploymentFlowChart() {
            // 重置所有节点为原始状态
            const allUnits = ['DB', 'SERVER', 'APP', 'WEB', 'BATCH', 'FEX', 'PROCESS', 'API'];
            allUnits.forEach(unit => {
                const node = document.getElementById(`node-${unit}`);
                if (node) {
                    const originalStyles = getOriginalNodeStyle(unit);
                    node.setAttribute('fill', originalStyles.fill);
                    node.setAttribute('stroke', originalStyles.stroke);
                    node.setAttribute('stroke-width', '1.5');
                    node.setAttribute('opacity', '1');
                    node.style.filter = 'none';
                }
            });
            
            // 重置所有连接线
            const allLines = [
                'line-start-db', 'line-db-server', 'line-server-app', 'line-server-web', 'line-server-batch',
                'line-app-fex', 'line-batch-fex', 'line-parallel-fex', 'line-fex-process', 'line-fex-api',
                'line-process-end', 'line-api-end'
            ];
            
            allLines.forEach(lineId => {
                const line = document.getElementById(lineId);
                if (line) {
                    line.setAttribute('stroke', '#64748b');
                    line.setAttribute('stroke-width', '1.5');
                    line.setAttribute('opacity', '1');
                    line.setAttribute('marker-end', 'url(#arrowhead)');
                }
            });
            
            // 移除高亮指示器
            const indicators = document.querySelectorAll('.highlight-indicator');
            indicators.forEach(indicator => indicator.remove());
        }

        // 提交投产申请
        document.addEventListener('DOMContentLoaded', function() {
            // 页面滚动到当前执行步骤
            const currentStep = document.querySelector('.border-warning');
            if (currentStep) {
                currentStep.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }

            // 生成需求列表
            generateRequirementsList();

            // 投产申请表单提交
            document.getElementById('productionForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const modal = document.getElementById('productionApplicationModal');
                const data = JSON.parse(modal.dataset.applicationData);
                
                const formData = {
                    title: document.getElementById('applicationTitle').value,
                    description: document.getElementById('applicationDesc').value,
                    requirement: data.requirement,
                    feature: data.feature,
                    system: data.system,
                    applicant: document.getElementById('applicant').value,
                    applicationTime: document.getElementById('applicationTime').value,
                    productionType: document.getElementById('productionType').value,
                    expectedTime: document.getElementById('expectedTime').value,
                    impactScope: document.getElementById('impactScope').value
                };
                
                console.log('投产申请信息:', formData);
                
                // 显示成功提示
                alert('投产申请提交成功！\n\n申请标题: ' + formData.title + '\n投产类型: ' + formData.productionType + '\n预计时间: ' + formData.expectedTime);
                
                // 关闭模态框
                closeProductionModal();
            });

            // 点击模态框背景关闭
            document.getElementById('productionApplicationModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeProductionModal();
                }
            });
                    
            // 点击文档详情模态框背景关闭
            document.getElementById('documentDetailModal').addEventListener('click', function(e) {
                if (e.target === this) {
                    closeDocumentModal();
                }
            });
        });
    </script>
</body>
</html>